<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="../公用CSS文件/all.css" />
	<script type="text/javascript" src="../js/jquery.min.js"></script> 	<script type="text/javascript" src="../js/js.js"></script>
	<meta charset="utf-8">
	<style type="text/css">
		/*table{min-width:80%}*/
	</style>
</head>
<body>

<div class="dt">Vue概念与说明</div>
<ul>
	<div class="ltable showimg">Vue概念</div>
	<div class="img">
		<li>Vue是一套用于构造用户界面的javascript框架，目地是通过尽可能简单的API实现响应的数据绑定和组合的视图组件</li>
	</div>
</ul>

<div class="dt">Vue使用</div>
<ul>
	<div class="ltable showimg">声明式渲染</div>
	<div class="img">
		<img src="img/声明式渲染.png">
		<li>最简单的声明式渲染就是在组件模板中声明一个模板变量，然后在其所在的DOM节点构造Vue实例去指定数据和事件处理，和普通DOM渲染不同的是：数据和视图已经绑定，数据发生改变也会改变视图</li>
	</div>

	<div class="ltable showimg">Vue指令</div>
	<div class="img">
		<img src="img/Vue指令.png">
		<li>Vue指令是模板组件中带有前缀 v-的特殊属性，以表示它们是 Vue 提供的特殊特性，常见的有v-bind属性绑定、v-if条件渲染、v-for遍历循环</li>
	</div>

	<div class="ltable showimg">Vue组件</div>
	<div class="img">
		<img src="img/组件.png">
		<li>组件就是在自定义的标签中加入的特殊功能，一般使用component方法为其指定模板数据方法等内容特性，在包含它的DOM被Vue实例时组件会自动被构造</li>
	</div>
</ul>

<div class="dt">Vue指令</div>
<ul>
	<div class="ltable showimg">Vue常用指令</div>
	<div class="img">
		<table>
			<tr>
				<th>指令</th><th>作用</th><th>示范</th><th>说明</th>
			</tr>
			<tr>
				<td>v-if</td>
				<td>条件渲染，根据某个值的真假决定该模板或组件是否被渲染</td>
				<td>&lt;p v-if='seen'  &gt;&lt;/p&gt;</td>
				<td>该指令根据seen值的真假决定该p元素模板或组件是否应该被渲染</td>
			</tr>
			<tr>
				<td>v-bind</td>
				<td>绑定指令，将DOM某个属性绑定某个值，也可以组合v-for使用将遍历出的数据传到构建的组件中</td>
				<td>&lt;todo-item v-for="item in users" v-bind:user="item" &gt;&lt;/todo-item&gt;</td>todo-item组件
				<td>todo-item组件的props接口将可以有效使用user这个数据</td>
			</tr>
			<tr>
				<td>v-for</td>
				<td>遍历指令，接受一个javascript遍历数组的表达式，并将数据直接提供给模板，如果要传递给组件使用则需要结合v-bind指令</td>
				<td>&lt;li v-for="item in list"&gt;{{ item.name }}&lt;/li&gt;</td>
				<td>v-for遍历出的数据将渲染到li标签</td>
			</tr>
			<tr>
				<td>v-model</td>
				<td>实现input输入和数据渲染的双向绑定</td>
				<td>&lt;input v-model="message"&gt;</td>
				<td>input的输入将会和DOM组件的message数据双向绑定</td>
			</tr>
		</table>
	</div>

	<div class="ltable showimg">Vue自定义指令</div>
	<div class="img">
		<img src="img/自定义指令.png">
		<li>自定义指令在组件中注册无效</li>
	</div>
</ul>

<div class="dt">Vue组件</div>
<ul>
	<div class="ltable showimg">组件的概念</div>
	<div class="img">
		<li>组件本质上是可复用的Vue实例</li>
		<li>Vue组件是以web组件规范设计自定义元素的语法为蓝本设计的，但除此之外还提供了跨组件数据、自定义事件等自定义元素没有的功能</li>
		<li>Vue组件可以在IE9及更高版本和其他现代浏览器下兼容，也可以包装于原生自定义元素之内</li>
		<li>Web ComponentS仅被小部分现代浏览器实现，目前仅有Safari 10.1+、Chrome 54+ 和 Firefox 63+ 原生支持 Web Components</li>
	</div>

	<div class="ltable showimg">全局组件</div>
	<div class="img">
		<img src="img/组件.png">
		<li>全局组件使用component方法注册组件，component接受类似Vue构造函数的参数，最后特色的区别是其data的值是一个闭包函数</li>
	</div>

	<div class="ltable showimg">单文件组件</div>
	<div class="img">
	</div>
</ul>

<div class="dt">Vue过滤器</div>
<ul>
	
</ul>

<div class="dt">Vue对象选项</div>
<ul>
	<div class="ltable showimg">Vue对象数据选项</div>
	<div class="img">
		<table>
			<tr>
				<th>属性</th>
				<th>值</th>
				<th>应用场景</th>
				<th>说明</th>
			</tr>
			<tr>
				<td>data</td>
				<td>json对象、匿名函数</td>
				<td>通用(组件只能是匿名函数)</td>
				<td>Vue实例的数据对象，可以用实例对象Obj.key或者Obj.$data.key获得其data中的值</td>
			</tr>
			<tr>
				<td>props</td>
				<td>对象、数组</td>
				<td>仅组件</td>
				<td>可接收来自父组件的数据(官方定义)，用来接收父组件数据的数据中"可用的数据"，因为有些时候还需要使用物品接收父组件的数组</td>
			</tr>
			<tr>
				<td>propsData</td>
				<td>对象、数组</td>
				<td>仅用于new创建的实例</td>
				<td>主要作用是方便测试，其数据直接提供给子组件而不需要接收动作</td>
			</tr>
			<tr>
				<td>computed</td>
				<td>对象，方法集或区分set、get的方法集</td>
				<td>非组件</td>
				<td>为Vue实例混入一些可用的计算属性，并可区分set、get两种调用方式，方法内部this一般都指向其Vue实例</td>
			</tr>
			<tr>
				<td>methods</td>
				<td>对象，方法集</td>
				<td>非组件</td>
				<td>为Vue实例混入一些可用的方法，非箭头函数方式指定方法内部this指向Vue实例</td>
			</tr>
			<tr>
				<td>watch</td>
				<td>对象，方法集</td>
				<td>非组件</td>
				<td>为Vue实例的data数据提供监听和处理，其数据变动会触发处理方法，指定immediate实例化时也会触发</td>
			</tr>
		</table>
		<li>props值为对象时，可以单独为每个数据提供类型type、默认值default、是否必传required和自定义验证validator四个设置</li>
		<li>computed的计算属性如果不使用箭头函数，this会指向实例，否则实例会作为第一个参数传入</li>
		<li>computed混入的方法是以属性形式调用，methods是以方法形式</li>
		<li>watch属性指定处理程序可以用匿名函数和函数名指定，并可以以数组形式指定多个，如果对触发的时机和对象有要求，使用对象指定，该对象有deep、immediate、handler3个属性，指定deep为true时，监听的属性为data的任意维度的key而不是一维key</li>
	</div>

	<div class="ltable showimg">Vue对象DOM选项</div>
	<div class="img">
		<table>
			<tr>
				<th>属性</th>
				<th>值</th>
				<th>应用场景</th>
				<th>说明</th>
			</tr>
			<tr>
				<td>el</td>
				<td>css选择器、DOM实例</td>
				<td>new 创建的实例</td>
				<td>提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标，如果没有则需要再次调用$mount指定</td>
			</tr>
			<tr>
				<td>template</td>
				<td>字符串模板</td>
				<td>通用</td>
				<td>为Vue实例指定模板，模板使用插槽标签slot会将el的内容插入到模板，否则直接替换</td>
			</tr>
			<tr>
				<td>render</td>
				<td>函数，createElement函数作为参数传入其中</td>
				<td>通用</td>
				<td>template的替代方案，以函数创建node，第二参数为标签属性对象一般含有domProp、style、props</td>
			</tr>
			<tr>
				<td>renderError</td>
				<td>函数，createElement函数作为第一参数传入，render渲染函捕获的错误对象作为第二参数传入</td>
				<td>通用</td>
				<td>该函数在render抛出错误(throw new)时被调用并终止渲染，错误对象有3个常用属性stack、message、name</td>
			</tr>
		</table>
		<li>createElement函数参数依次为标签名、属性参数对象(可以省略)、插槽分发内容，通常为this.$slots.default，createElement函数可以被嵌套，嵌套时，仅最内层需要指定第三参数</li>
	</div>

	<div class="ltable showimg">Vue对象生命周期钩子</div>
	<div class="img">
		<table>
			<tr>
				<th>属性</th>
				<th>说明</th>
			</tr>
			<tr>
				<td>beforeCreate</td>
				<td>在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用</td>
			</tr>
			<tr>
				<td>created</td>
				<td>在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见</td>
			</tr>
			<tr>
				<td>beforeMount</td>
				<td>在挂载开始之前被调用：相关的 render 函数首次被调用。</td>
			</tr>
			<tr>
				<td>mounted</td>
				<td>挂载完成之后被调用，多用来请求接口</td>
			</tr>
			<tr>
				<td>beforeUpdate</td>
				<td>在实例的data数据变动引起的Dom更新发生前被调用</td>
			</tr>
			<tr>
				<td>updated</td>
				<td>在实例的data数据变动引起的Dom更新发生后被调用</td>
			</tr>
			<tr>
				<td>activated</td>
				<td>keep-alive组件激活时调用</td>
			</tr>
			<tr>
				<td>deactivated</td>
				<td>keep-alive组件停用时调用</td>
			</tr>
			<tr>
				<td>beforeDestroy</td>
				<td>实例销毁之前调用。在这一步，实例仍然完全可用。</td>
			</tr>
			<tr>
				<td>destroyed</td>
				<td>Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。但其数据集等依然可以访问</td>
			</tr>
			<tr>
				<td>ErrorCaptrued</td>
				<td>当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。</td>
			</tr>
		</table>
		<li>生命周期钩子都是在Vue实例的生命周期内运行的函数，且都没有参数</li>
	</div>

	<div class="ltable showimg">Vue对象资源选项</div>
	<div class="img">
		<table>
			<tr>
				<th>属性</th>
				<td>值</td>
				<td>应用场景</td>
				<th>说明</th>
			</tr>
			<tr>
				<td>directives</td>
				<td>注册指令的json对象</td>
				<td>new 创建的实例</td>
				<td>指令选项，用于注册局部指令，仅在实例内可用</td>
			</tr>
			<tr>
				<td>filters</td>
				<td>注册过滤器的json对象</td>
				<td>new 创建的实例</td>
				<td>过滤器选项，用于注册局部过滤器</td>
			</tr>
			<tr>
				<td>components</td>
				<td>注册组件的json对象</td>
				<td>new 创建的实例</td>
				<td>组件选项，用于注册局部组件</td>
			</tr>
		</table>
	</div>

	<div class="ltable showimg">Vue对象组合选项</div>
	<div class="img">
		<table>
			<tr>
				<th>属性</th>
				<td>值</td>
				<td>应用场景</td>
				<th>说明</th>
			</tr>
			<tr>
				<td>parent</td>
				<td>Vue实例对象</td>
				<td>new 创建的实例</td>
				<td>它们的主要目的是作为访问组件的应急方法。更推荐用 props 和 events 实现父子组件通信</td>
			</tr>
			<tr>
				<td>mixins</td>
				<td>混入对象的数组或对象</td>
				<td></td>
			</tr>
		</table>
	</div>
</ul>


</body>
</html>